<template>
  <div class="view-school-view">
    <ContentField>
      <template v-slot:header> 查看学校信息 </template>
      <template v-slot:body>
        <div
          class="searchConditionArea"
          style="margin-top: 0px; text-align: center"
        >
          <el-divider direction="vertical"></el-divider>
          <el-select
            v-model="condition.pid"
            filterable
            placeholder="请选择省份"
            @change="getCitiesByPid"
            style="margin-left: 20px"
            class="searchConditionArea-select"
          >
            <el-option
              v-for="province in provinces"
              :key="province.id"
              :label="province.name"
              :value="province.id"
            >
            </el-option>
          </el-select>
          <el-divider direction="vertical"></el-divider>
          <el-select
            v-model="condition.cid"
            filterable
            placeholder="请选择城市"
            @change="selectSchoolsByCid"
            style="margin-left: 20px"
            class="searchConditionArea-select"
          >
            <el-option
              v-for="city in cities"
              :key="city.id"
              :label="city.name"
              :value="city.id"
            >
            </el-option>
          </el-select>
          <el-divider direction="vertical"></el-divider>
          <!-- <el-button
            icon="el-icon-search"
            circle
            style="margin-left: 20px"
          ></el-button> -->
        </div>
        <el-divider></el-divider>
        <div>
          <el-table
            :data="schools"
            height="500"
            border
            style="width: 100%"
            @row-click="handleTableRowClick"
          >
            <el-table-column prop="id" label="编号" width="180">
            </el-table-column>
            <el-table-column prop="name" label="名称" width="180">
            </el-table-column>
            <el-table-column prop="address" label="地址"> </el-table-column>
          </el-table>
          <el-dialog
            title="学校详情"
            :visible.sync="centerDialogVisible"
            width="50%"
            center
          >
            <el-form label-position="top" label-width="80px" :model="curSchool">
              <el-form-item label="编号">
                <el-input v-model="curSchool.id" disabled></el-input>
              </el-form-item>
              <el-form-item label="名称">
                <el-input v-model="curSchool.name"></el-input>
              </el-form-item>
              <el-form-item label="地址">
                <el-input v-model="curSchool.address"></el-input>
              </el-form-item>
              <el-form-item label="创建时间">
                <el-input v-model="curSchool.createTime" disabled></el-input>
              </el-form-item>
            </el-form>

            <span slot="footer" class="dialog-footer">
              <el-button
                @click="centerDialogVisible = false"
                style="margin-right: 10px"
              >
                取 消
              </el-button>

              <el-popconfirm
                confirm-button-text="确定"
                cancel-button-text="取消"
                icon="el-icon-info"
                icon-color="red"
                title="确定删除这个学校吗？"
                @confirm="handleDeleteConfirm"
              >
                <el-button slot="reference" type="danger">删除</el-button>
              </el-popconfirm>
              <el-button
                type="primary"
                @click="updateSchool"
                style="margin-left: 10px"
              >
                修改
              </el-button>
            </span>
          </el-dialog>
        </div>
      </template>
    </ContentField>
  </div>
</template>

<script>
import ContentField from "../../components/ContentField.vue";
export default {
  name: "ViewSchoolView",
  components: {
    ContentField,
  },
  created() {
    this.getProvinces();
  },
  methods: {
    // 获取所有省份
    getProvinces() {
      let outer = this;
      this.$store.dispatch("getProvinces", {
        token: this.$store.state.user.jwt_token,
        success(resp) {
          outer.provinces = resp.data.data;
        },
        error(resp) {
          console.log(resp);
        },
      });
    },
    // 选择省份后调用，查询省份下的城市
    getCitiesByPid(flag) {
      let outer = this;
      this.condition.cid = "";
      this.condition.sid = "";
      if (flag == 1) {
        this.condition.pid = this.curClue.pid;
      }
      this.$store.dispatch("getCitiesByPid", {
        pid: this.condition.pid,
        token: this.$store.state.user.jwt_token,
        success(resp) {
          outer.cities = resp.data.data;
        },
        error(resp) {
          console.log(resp);
        },
      });
    },
    // 选择城市后调用，查询城市对应的学校
    selectSchoolsByCid(flag) {
      let outer = this;
      this.condition.sid = "";
      if (flag == 1) {
        this.condition.cid = this.curClue.cid;
      }
      this.$store.dispatch("selectSchoolsByCid", {
        cid: this.condition.cid,
        token: this.$store.state.user.jwt_token,
        success(resp) {
          outer.schools = resp.data.data;
        },
        error(resp) {
          console.log(resp);
        },
      });
    },
    // 处理每一行的点击事件
    handleTableRowClick(row) {
      this.curSchool = row;
      this.centerDialogVisible = true;
    },
    // 确定删除学校
    handleDeleteConfirm() {
      console.log("confirm");
      this.deleteSchoolById();
    },
    // 发送删除学校请求
    deleteSchoolById() {
      let outer = this;
      this.$store.dispatch("deleteSchoolById", {
        id: this.curSchool.id,
        token: this.$store.state.user.jwt_token,
        success(resp) {
          if (resp.data.code == 200) {
            outer.$message({
              type: "success",
              message: "删除学校成功",
            });
            outer.selectSchoolsByCid();
            outer.centerDialogVisible = false;
          } else {
            outer.$message({
              type: "error",
              message: "删除学校失败" + resp.data.message,
            });
          }
        },
        error(resp) {
          console.log(resp);
        },
      });
    },

    // 发送修改学校信息请求
    updateSchool() {
      let outer = this;
      this.$store.dispatch("updateSchool", {
        school: this.curSchool,
        token: this.$store.state.user.jwt_token,
        success(resp) {
          if (resp.data.code == 200) {
            outer.$message({
              type: "success",
              message: "修改学校信息成功",
            });
            outer.selectSchoolsByCid();
            outer.centerDialogVisible = false;
          } else {
            outer.$message({
              type: "error",
              message: "删除学校信息失败" + resp.data.message,
            });
          }
        },
        error(resp) {
          console.log(resp);
        },
      });
    },
  },
  data() {
    return {
      condition: {
        pid: "",
        cid: "",
        sid: "",
      },
      provinces: [],
      cities: [],
      schools: [],
      curSchool: {},
      centerDialogVisible: false,
    };
  },
};
</script>

<style scoped></style>
